<script setup>
import { ref, onMounted } from 'vue'
import { ElTable, ElTableColumn, ElTag, ElButton, ElMessage, ElMessageBox } from 'element-plus'
import { getBrandPageService, queryBrandById, updateBrand, addBrand, deleteBrand } from '@/api/brand'


// 品牌数据列表
const brands = ref([])

// 编辑表单显隐
const editFormVisible = ref(false)

// 编辑表单数据
const editForm = ref({})

// 添加和编辑
const formTitle = ref('')

// 查询条件
const search = ref({})

// 分页
// 当前页码
const currentPage = ref(1);
// 每页数量
const pageSize = ref(10);
// 总数
const total = ref(0);

// 每页展示记录数变化
const handleSizeChange = (val) => {
    // 同步更新 pageSize
    pageSize.value = val;
    // 同步更新搜索参数
    search.value.pageSize = val;
    console.log(`每页 ${val} 条`);
    serach();
}
// 页码变化时触发
const handleCurrentChange = (val) => {
    // 同步更新 currentPage
    currentPage.value = val;
    // 同步更新搜索参数
    search.value.pageNum = val;
    console.log(`当前页: ${val}`);
    serach();
}

// 获取数据
const serach = async () => {
    // 调用品牌查询接口
    let result = await getBrandPageService(search.value);
    brands.value = result.data.list;
    search.value.pageSize = pageSize.value;
    total.value = parseInt(result.data.total)
}

// 编辑
const editById = async (id) => {
    formTitle.value = '修改品牌'
    console.log("编辑商品", id)
    const result = await queryBrandById(id)
    editForm.value = result.data
    console.log("编辑商品", editForm.value)
    editFormVisible.value = true
}

// 添加
const add = () => {
    editForm.value = {}
    formTitle.value = '添加品牌'
    editFormVisible.value = true
}

// 删除
const deleteById = (id) => {
    // 删除
    ElMessageBox.confirm('此操作将永久删除该品牌, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(async () => {
        // 确定删除
        await deleteBrand(id);
        ElMessage.success('删除成功!');
        serach();
    }).catch(() => {
        // 取消删除
        ElMessage.info('已取消删除');
    })
}
// 保存
const saveEdit = async () => {
    if (editForm.value.id) {
        console.log("保存商品", editForm.value);
        const result = await updateBrand(editForm.value);
        console.log("保存结果", result);
        ElMessage.success('保存成功!');
    } else {
        await addBrand(editForm.value)
        ElMessage.success('添加成功!');
    }
    editForm.value = {}
    editFormVisible.value = false;
    serach();
}

// 组件挂载时获取数据
onMounted(() => {
    serach()
})

</script>

<template>
    <div class="brand-list-container">

        <!-- 头部区域 -->
        <div class="header-container">
            <h2>品牌管理</h2>
            <el-button type="primary" @click="add">添加品牌</el-button>
        </div>

        <!-- 品牌列表 -->
        <el-table :data="brands" border :header-cell-style="{ background: '#f5f7fa' }" v-loading="loading">
            <el-table-column prop="id" label="品牌ID" width="80" align="center"></el-table-column>

            <el-table-column prop="brandName" label="品牌名称" min-width="150">
                <template #default="scope">
                    <span v-if="scope.row.isDeleted === 1" style="text-decoration: line-through;">
                        {{ scope.row.brandName }}
                    </span>
                    <span v-else>{{ scope.row.brandName }}</span>
                </template>
            </el-table-column>

            <!-- <el-table-column prop="createDate" label="创建日期" width="150" align="center">
                <template #default="scope">
                    {{ new Date(scope.row.createDate).toLocaleDateString() }}
                </template>
            </el-table-column>

            <el-table-column prop="updateDate" label="更新日期" width="150" align="center">
                <template #default="scope">
                    {{ new Date(scope.row.updateDate).toLocaleDateString() }}
                </template>
            </el-table-column> -->

            <!-- <el-table-column label="状态" width="100" align="center">
                <template #default="scope">
                    <el-tag :type="scope.row.isDeleted === 1 ? 'danger' : 'success'" size="small">
                        {{ scope.row.isDeleted === 1 ? '已删除' : '正常' }}
                    </el-tag>
                </template>
            </el-table-column> -->

            <el-table-column label="操作" width="180" align="center">
                <template #default="scope">
                    <el-button type="primary" size="small" @click="editById(scope.row.id)"><el-icon>
                            <EditPen />
                        </el-icon> </el-button>
                    <el-button type="danger" size="small" @click="deleteById(scope.row.id)"><el-icon>
                            <Delete />
                        </el-icon> </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
            :page-sizes="[5, 10, 15, 20, 30, 50, 100]" size="default" :background="true"
            layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />

        <!-- 编辑弹窗 -->
        <el-dialog style="width: 20%;" v-model="editFormVisible" :title="formTitle">
            <el-form :model="editForm" :rules="formRules" label-width="100px">
                <el-form-item label="品牌名称" prop="brandName">
                    <el-input v-model="editForm.brandName" />
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="editFormVisible = false">取消</el-button>
                <el-button type="primary" @click="saveEdit">确定</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<style scoped>
.brand-list-container {
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
}

.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 6vh 2vh 0;
}

.header-container h2 {
    margin: 0;
}

.el-pagination {
    margin: 3vh 0 0 25% !important;
}
</style>